<template>
	<view class="user-info" :style="{ top: top + 'px', backgroundColor: bgc }">
		<view class="box1">
			<picker v-if="memberId && top" mode="selector" :range="columns" range-key="name" @change="confirm"
				@click="show = true">
				<view class="info">
					<view class="top-filling" :style="{ backgroundColor: bgc }"></view>
					<avatar :src="$preview(dataList[memberId].avatar_url)" size="56"></avatar>
					<u-icon name="arrow-down-fill" :color="color" size="10" :label="dataList[memberId].name"
						labelPos="left" :label-color="color" margin-left="12" />
				</view>
			</picker>

		</view>
		<view class="box2">
			<view @click="handleRightButtonClick" class="right-button">
				<text>报表</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDomSize
	} from '@/utils/util'
	import Avatar from './Avatar.vue'
	import store from '@/store'

	export default {
		components: {
			Avatar
		},
		props: {
			value: Number || null,
			scrollTop: Number,
			bgHeight: Number,
			refreshKey: String,
		},
		data() {
			return {
				top: 0,
			}
		},
		methods: {
			confirm({
				detail: {
					value
				}
			}) {
				const memberData = this.columns[value]
				const id = memberData.id
				store.dispatch('SelectMember', {
					id,
					key: this.refreshKey
				})
				this.change(id)
			},
			change(id) {
				this.$emit('input', id)
			},
			handleRightButtonClick() {
				uni.showToast({
					title: '右侧按钮被点击',
					icon: 'none'
				});
				this.$navTo('pages/abb/index')
				// 在这里添加点击事件的处理逻辑
			}
		},
		computed: {
			columns() {
				return store.getters.memberList
			},
			transparency() {
				const {
					scrollTop,
					bgHeight
				} = this
				if (!(scrollTop && bgHeight)) return 0
				const diff = (bgHeight * .6) - scrollTop
				if (diff <= 0) return 1
				return 1 - Math.fround(diff / bgHeight)
			},
			bgc() {
				return `rgba(255, 255, 255, ${this.transparency})`
			},
			color() {
				const colorValue = Math.round((1 - this.transparency) * 255)
				const color = 'rgb(' + colorValue + ',' + colorValue + ',' + colorValue + ')'
				return color
			},
			memberId() {
				const id = store.getters.memberId
				this.change(id)
				return id
			},
			dataList() {
				const list = store.getters.memberList
				const listMap = {}
				list.forEach(item => {
					listMap[item.id] = item
				})
				return listMap
			}
		},
		mounted() {
			const app = this
			this.change(app.memberId)
			uni.getSystemInfo({
				success: (res) => {
					// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
					getDomSize(this, '.user-info', 'height').then(height => {
						app.top = menuButtonInfo.top + menuButtonInfo.height / 2 - height / 2
					})
				},
				fail: (err) => {
					// console.log('获取系统信息失败:', err)
				},
			})
		},
	}
</script>

<style lang="scss" scoped>
	.user-info {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: space-between;

		.box2 {
			padding-right: 200rpx;
			display: flex;
			align-items: center;
			.right-button {
				padding: 15rpx;
				background-color: #f0f;
				border-radius: 20rpx;
				color: white;
				font-size: 27rpx;
				
			}

		}

		.box1 {
			.info {
				height: 88rpx;
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				gap: 16rpx;

				.top-filling {
					width: 100%;
					height: 200rpx;
					position: absolute;
					top: 0;
					transform: translateY(-100%);
					left: 0;
				}
			}
		}
	}
</style>